<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" class="test">
    <div id="app"></div>
    <script>
        function update(val) {
            app.innerHTML = val
        }

        // 定义响应式函数
        function defineReactive(obj, key, val) {
            observe(val)
            Object.defineProperty(obj, key, {
                get() {
                    console.log(`get ${key}：${val}`)
                    return val
                },
                set(newVal) {
                    if(newVal !== val) {
                        val = newVal
                        observe(newVal)
                        update(val)
                    }
                }
            })
        }

        const obj = {
            foo: '',
            name: '张阿三'
        }
        

        function observe(obj) {
            if(typeof obj !== 'object' || obj === null) return
            Object.keys(obj).forEach(key=> {
                defineReactive(obj, key, obj[key])
            }) 
        }

        observe(obj)

        let a = document.querySelector('.test')
        a.addEventListener('keyup', function(e){
            update(e.target.value)
        })
    </script>
</body>
</html>